<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		div{
			height: 50px;
			width: 200px;
		}
		.one{
			background-color: red;
			animation: up .5s .5s both;
		}
		.two{
			background-color: aqua;
			animation: up .5s .7s both;
		}
		.three{
			background-color: orange;
			animation: up .5s .9s both;
		}
		@keyframes up{
			0%{
				opacity: 0;
				transform: translateY(100%);
			}
			100%{
				opacity: 1;
				transform: translateY(0%);	
			}
		}
	</style>
</head>
<body>

	<div class="one"></div>
	<div class="two"></div>
	<div class="three"></div>
	<!-- 边显示边向上 -->


</body>
</html>